<template>
  <span class="avatar transition_0_3" :style="style" >
  </span>
</template>

<script>
export default {
  name: "Avatar",
  props: {
    size: {
      type: [Number,String],
      default: 40,
    },
    src: {
      type: String,
      default: "",
    },
    alt: {
      type: String,
      default: "",
    },
    border: {
      type: Boolean,
      default: false,
    },
    borderRadius: {
      type: String,
      default: "100%",
    },
    borderWidth: {
      type: String,
      default: "4px",
    },
    color: {
      type: String,
      default: "#fff",
    },
    backgroundColor: {
      type: String,
      default: "#fff",
    },
  },
  data() {
    return {};
  },
  computed: {
    style() {
      return {
        width: this.size + "px",
        height: this.size + "px",
        borderRadius: this.borderRadius,
        borderWidth: this.borderWidth,
        color: this.color,
        backgroundColor: this.backgroundColor,
        backgroundImage: `url(${this.src})`,
        backgroundSize: "cover",
        borderStyle: this.border ? "solid" : "none",
      };
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.avatar{
  display: inline-block;
  overflow: hidden;
}
</style>